<template>
  <div class="m-box">
    <div class="t-box">
      <div class="sh-box">
        <div class="title-box">
          <img src="~@img/project/icon-xmgl.png" alt="" />
          <span>我的项目</span>
        </div>
        <ul class="project-list">
          <li>
            <!--   @click="
              $router.push({
                name: 'infoaccountbook',
                query: { project_type: 1 },
              })
              style="cursor:pointer"
            " -->
            <img src="~@img/project/icon-xmgl-01.png" alt="" />
            <p class="title">我的招引项目</p>
            <p class="num">
              <span>{{ nums.project1_count }}</span
              >个
            </p>
          </li>
          <li>
            <!-- @click="
              $router.push({
                name: 'infoaccountbook',
                query: { project_type: 2 },
              })
              style="cursor:pointer"
            " -->
            <img src="~@img/project/icon-xmgl-02.png" alt="" />
            <p class="title">我的洽谈项目</p>
            <p class="num">
              <span>{{ nums.project2_count }}</span
              >个
            </p>
          </li>
          <li>
            <!-- 
             @click="
              $router.push({
                name: 'infoaccountbook',
                query: { project_type: 3 },
              })
            "
            style="cursor:pointer"
           -->
            <img src="~@img/project/icon-xmgl-03.png" alt="" />
            <p class="title">我的签约项目</p>
            <p class="num">
              <span>{{ nums.project3_count }}</span
              >个
            </p>
          </li>
          <li>
            <!--   @click="
              $router.push({
                name: 'projectaccountbook',
                query: { project_type: 4 },
              })
            "
            style="cursor:pointer" -->
            <img src="~@img/project/icon-xmgl-04.png" alt="" />
            <p class="title">我的开工项目</p>
            <p class="num">
              <span>{{ nums.project4_count }}</span
              >个
            </p>
          </li>
          <li>
            <!--   @click="
              $router.push({
                name: 'projectaccountbook',
                query: { project_type: 5 },
              })
            "
            style="cursor:pointer" -->
            <img src="~@img/project/icon-xmgl-05.png" alt="" />
            <p class="title">我的投产项目</p>
            <p class="num">
              <span>{{ nums.project5_count }}</span
              >个
            </p>
          </li>
          <li>
            <img src="~@img/project/icon-xmgl-06.png" alt="" />
            <p class="title">暂缓或终止项目</p>
            <p class="num">
              <span>{{ nums.project6_count }}</span
              >个
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="b-box">
      <div class="sh-box box-p-20">
        <div class="title-box">
          <img src="~@img/project/icon-xmdh.png" alt="" />
          <span>项目导航</span>
        </div>
        <div class="fast" @click="$router.push({ name: 'infoaccountbook' })">
          <span>信息台账快捷入口</span>
          <img src="~@img/project/big-icon-kjrk.png" alt="" />
        </div>
        <div class="fast" @click="$router.push({ name: 'projectaccountbook' })">
          <span>项目台账快捷入口</span>
          <img src="~@img/project/big-icon-kjrk.png" alt="" />
        </div>
      </div>
      <div class="sh-box">
        <div class="title-box">
          <img src="~@img/project/icon-dbyw.png" alt="" />
          <span>待办业务</span>
        </div>
        <div class="nav-card">
          <ul>
            <li
              :class="[activeCard == 1 ? 'active' : '']"
              @click="changeActiveCard(1)"
            >
              <el-badge :value="total1" class="item">
                待提交
              </el-badge>
            </li>
            <li
              :class="[activeCard == 2 ? 'active' : '']"
              @click="changeActiveCard(2)"
            >
              <el-badge :value="total2" class="item">
                待审核
              </el-badge>
            </li>
            <li
              :class="[activeCard == 3 ? 'active' : '']"
              @click="changeActiveCard(3)"
            >
              <el-badge :value="total3" class="item">
                待更新
              </el-badge>
            </li>
            <li
              :class="[activeCard == 4 ? 'active' : '']"
              @click="changeActiveCard(4)"
            >
              <el-badge :value="total4" class="item">
                督办通知
              </el-badge>
            </li>
            <li
              :class="[activeCard == 5 ? 'active' : '']"
              @click="changeActiveCard(5)"
            >
              <el-badge value="" class="item">
                历史记录
              </el-badge>
            </li>
          </ul>
          <div v-if="activeCard == 1">
            <el-table
              key="待提交"
              :data="listInfo1"
              ref="multipleTable"
              border
              stripe
              row-key="id"
              style="width: 100%;"
              :height="310"
              tooltip-effect="light"
              :header-cell-style="{
                textAlign: 'center',
              }"
              :cell-style="{
                textAlign: 'center',
              }"
              @selection-change="handleSelectionChange"
            >
              <!-- <el-table-column
              type="selection"
              :reserve-selection="true"
              width="48"
              align="center"
              
            >
            </el-table-column> -->
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">
                  <div>
                    {{ (page1 - 1) * per_page1 + scope.row.index }}
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column  prop="index" label="序号" > </el-table-column> -->
              <el-table-column :show-overflow-tooltip="true" label="待提交事项">
                <template slot-scope="scope">
                  <!-- <div @click="" style="cursor:pointer"> -->
                  {{ scope.row.item_name }}
                  <!-- </div> -->
                </template>
              </el-table-column>
              <!-- <el-table-column
                :show-overflow-tooltip="true"
                label="负责人"
                prop="file_people"
              >
              </el-table-column> -->
              <el-table-column
                :show-overflow-tooltip="true"
                label="接收时间"
                prop="receive_time"
              >
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="操作">
                <template slot-scope="scope">
                  <span class="tab-btn" @click="goSubmit(scope.row.project_id)">
                    提交
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @current-change="handleCurrentChange1"
              :current-page.sync="page1"
              :page-size="per_page1"
              layout=" prev, pager, next"
              :total="total1"
            >
            </el-pagination>
          </div>
          <div v-if="activeCard == 2">
            <el-table
              key="待审核"
              :data="listInfo2"
              ref="multipleTable"
              border
              stripe
              row-key="id"
              style="width: 100%;"
              :height="310"
              tooltip-effect="light"
              :header-cell-style="{
                textAlign: 'center',
              }"
              :cell-style="{
                textAlign: 'center',
              }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                :reserve-selection="true"
                width="48"
                align="center"
              >
              </el-table-column>
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">
                  <div>
                    {{ (page2 - 1) * per_page2 + scope.row.index }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="待更新事项">
                <template slot-scope="scope">
                  <!-- <div @click="" style="cursor:pointer"> -->
                  {{ scope.row.item_name }}
                  <!-- </div> -->
                </template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="负责人"
                prop="file_people"
              >
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="接收时间"
                prop="receive_time"
              >
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="操作">
                <template slot-scope="scope">
                  <span class="tab-btn" @click="goExamine(scope.row)">
                    审核
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <!-- <div class="examine">
              批量审核
            </div> -->
            <el-pagination
              @current-change="handleCurrentChange2"
              :current-page.sync="page2"
              :page-size="per_page2"
              layout=" prev, pager, next"
              :total="total2"
            >
            </el-pagination>
          </div>
          <div v-if="activeCard == 3">
            <el-table
              key="待更新"
              :data="listInfo3"
              ref="multipleTable"
              border
              stripe
              row-key="id"
              style="width: 100%;"
              :height="310"
              tooltip-effect="light"
              :header-cell-style="{
                textAlign: 'center',
              }"
              :cell-style="{
                textAlign: 'center',
              }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">
                  <div>
                    {{ (page3 - 1) * per_page3 + scope.row.index }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="待更新事项">
                <template slot-scope="scope">
                  <!-- <div @click="" style="cursor:pointer"> -->
                  {{ scope.row.item_name }}
                  <!-- </div> -->
                </template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="负责人"
                prop="file_people"
              >
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="接收时间"
                prop="receive_time"
              >
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="操作">
                <template slot-scope="scope">
                  <span class="tab-btn" @click="goUpData(scope.row)">
                    更新
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @current-change="handleCurrentChange3"
              :current-page.sync="page3"
              :page-size="per_page3"
              layout=" prev, pager, next"
              :total="total3"
            >
            </el-pagination>
          </div>
          <div v-if="activeCard == 4">
            <el-table
              key="督办通知"
              :data="listInfo4"
              ref="multipleTable"
              border
              stripe
              row-key="id"
              style="width: 100%;"
              :height="310"
              tooltip-effect="light"
              :header-cell-style="{
                textAlign: 'center',
              }"
              :cell-style="{
                textAlign: 'center',
              }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">
                  <div>
                    {{ (page4 - 1) * per_page4 + scope.row.index }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="督办通知事项"
              >
                <template slot-scope="scope">
                  <!-- <div @click="" style="cursor:pointer"> -->
                  {{ scope.row.item }}
                  <!-- </div> -->
                </template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="发送人"
                prop="send_people"
              >
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="接收人"
                prop="receive_people"
              >
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="发送时间"
                prop="send_time"
              >
              </el-table-column>

              <el-table-column :show-overflow-tooltip="true" label="操作">
                <template slot-scope="scope">
                  <span class="tab-btn" @click="goSupOrPro(scope.row)">
                    查看
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @current-change="handleCurrentChange4"
              :current-page.sync="page4"
              :page-size="per_page4"
              layout=" prev, pager, next"
              :total="total4"
            >
            </el-pagination>
          </div>
          <div v-if="activeCard == 5">
            <el-table
              key="历史记录"
              :data="listInfo5"
              ref="multipleTable"
              border
              stripe
              row-key="id"
              style="width: 100%;"
              :height="310"
              tooltip-effect="light"
              :header-cell-style="{
                textAlign: 'center',
              }"
              :cell-style="{
                textAlign: 'center',
              }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">
                  <div>
                    {{ (page5 - 1) * per_page5 + scope.row.index }}
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column  prop="index" label="序号" > </el-table-column> -->
              <el-table-column :show-overflow-tooltip="true" label="完成事项">
                <template slot-scope="scope">
                  <!-- <div @click="" style="cursor:pointer"> -->
                  {{ scope.row.item }}
                  <!-- </div> -->
                </template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="完成时间"
                prop="time"
              >
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="状态">
                <template slot-scope="scope">
                  <p style="color:green">
                    {{ scope.row.status }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="操作">
                <template slot-scope="scope">
                  <span class="tab-btn" @click="go(scope.row)">
                    查看
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @current-change="handleCurrentChange5"
              :current-page.sync="page5"
              :page-size="per_page5"
              layout=" prev, pager, next"
              :total="total5"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  MyProject,
  WaitAudit,
  WaitUpdate,
  WaitCommit,
  MyGrade,
  WaitHistory,
  GetNoticeLog,
  CheckNotice,
} from "@/api/project";
export default {
  data() {
    return {
      instanceRadar: null,
      activeCard: 1,

      listInfo1: [],
      page1: 1,
      per_page1: 5,
      total1: 0,

      listInfo2: [],
      page2: 1,
      per_page2: 5,
      total2: 0,

      listInfo3: [],
      page3: 1,
      per_page3: 5,
      total3: 0,

      listInfo4: [],
      page4: 1,
      per_page4: 5,
      total4: 0,

      listInfo5: [],
      page5: 1,
      per_page5: 5,
      total5: 0,

      radarData: {},
      nums: {},
      token: "",
    };
  },
  mounted() {
    let token = localStorage.getItem("login");
    this.token = token;
    this.activeCard = localStorage.getItem("activeStatus") || 1;
    // this.initRadar();
    this.getMyProjectNums(token);
    // this.getMyGrade();
    this.getWaitCommit();
    this.getWaitAudit();
    this.getWaitUpdate();
    this.GetNoticeLog();
    this.getWaitHistory();
  },
  methods: {
    async getMyGrade() {
      let res = await MyGrade({ token: this.token });
      console.log(res);
      if (res.code && res.code != 0) {
      } else {
        this.radarData = res;
        this.upDataRadar();
      }
    },

    async getMyProjectNums(token) {
      let res = await MyProject({ token });
      this.nums = res.data_dic[0];
    },
    changeActiveCard(type) {
      this.activeCard = type;
      localStorage.setItem("activeStatus", type);
    },
    async getWaitCommit(token) {
      let res = await WaitCommit({
        token: this.token,
        page: this.page1,
        per_page: this.per_page1,
      });
      if (res.code && res.code != 0) {
        this.listInfo1 = [];
        this.total1 = 0;
      } else {
        this.listInfo1 = res.data_list.map((item, index) => {
          item.index = index + 1;
          return item;
        });
        this.total1 = res.size;
      }
    },
    async getWaitAudit(token) {
      let res = await WaitAudit({
        token: this.token,
        page: this.page2,
        per_page: this.per_page2,
      });
      if (res.code && res.code != 0) {
        this.listInfo2 = [];
        this.total2 = 0;
      } else {
        this.listInfo2 = res.data_list.map((item, index) => {
          item.index = index + 1;
          return item;
        });
        this.total2 = res.size;
      }
    },
    async getWaitUpdate(token) {
      let res = await WaitUpdate({
        token: this.token,
        page: this.page3,
        per_page: this.per_page3,
      });
      if (res.code && res.code != 0) {
        this.listInfo3 = [];
        this.total3 = 0;
      } else {
        this.listInfo3 = res.data_list.map((item, index) => {
          item.index = index + 1;
          return item;
        });
        this.total3 = res.size;
      }
    },
    async GetNoticeLog(token) {
      let res = await GetNoticeLog({
        token: this.token,
        page: this.page4,
        per_page: this.per_page4,
      });
      if (res.code && res.code != 0) {
        this.listInfo4 = [];
        this.total4 = 0;
      } else {
        this.listInfo4 = res.data.map((item, index) => {
          item.index = index + 1;
          return item;
        });
        this.total4 = res.size;
      }
    },
    async getWaitHistory(token) {
      let res = await WaitHistory({
        token: this.token,
        page: this.page5,
        per_page: this.per_page5,
      });
      if (res.code && res.code != 0) {
        this.listInfo5 = [];
        this.total5 = 0;
      } else {
        this.listInfo5 = res.data.map((item, index) => {
          item.index = index + 1;
          return item;
        });
        this.total5 = res.size;
      }
    },

    handleSelectionChange() {},
    handleCurrentChange1(val) {
      this.page1 = val;
      this.getWaitCommit();
    },
    handleCurrentChange2(val) {
      this.page2 = val;
      this.getWaitAudit();
    },
    handleCurrentChange3(val) {
      this.page3 = val;
      this.getWaitUpdate();
    },
    handleCurrentChange4(val) {
      this.page4 = val;
      this.GetNoticeLog();
    },
    handleCurrentChange5(val) {
      this.page5 = val;
      this.getWaitHistory();
    },
    initRadar() {
      this.instanceRadar = this.$echarts.init(this.$refs.chartRadar);
      let options = {
        color: ["#fdbe24"],
        title: {
          top: "center",
          left: "center",
          text: "100分",
          itemStyle: {
            fontSize: 30,
            fontWeight: "600",
          },
          textStyle: {
            color: "#fdbe24",
            fontSize: 30,
            fontWeight: "bold",
            fontFamily: "Microsoft YaHei",
          },
          zlevel: 99,
        },
        legend: {
          bottom: 0,
          left: 0,
          data: ["绩效考核"],
        },
        radar: {
          // shape: 'circle',
          splitArea: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
            },
          },
          indicator: [
            { name: "项目基础分", max: 100, color: "#999" },
            { name: "综合评定分", max: 10, color: "#999" },
            { name: "项目推进扣减分", max: 200, color: "#999" },
            // { name: "未按时修改扣减分", max: 200, color: "#999" },
            // { name: "未按照序时完成扣减分", max: 200, color: "#999" },
            // { name: "未按时报送扣减分", max: 200, color: "#999" },
            { name: "项目数量分", max: 200, color: "#999" },
          ],
          // zlevel: 88,
        },
        series: [
          {
            type: "radar",
            areaStyle: { color: "rgba(253, 190, 36,.25)" },

            data: [
              {
                value: [],
                name: "绩效考核",
              },
            ],
          },
        ],
      };
      this.instanceRadar.setOption(options);
      this.instanceRadar.on("legendselectchanged", (item) => {
        this.instanceRadar.dispatchAction({
          type: "legendSelect",
          // 图例名称
          name: item.name,
        });
      });
    },
    upDataRadar() {
      let options = {
        title: {
          text: this.radarData.total_score + "分",
        },
        series: [
          {
            data: [
              {
                value: [
                  this.radarData.class_score1,
                  this.radarData.class_score2,
                  this.radarData.class_score3,
                  this.radarData.class_score4,
                ],
                name: "绩效考核",
              },
            ],
          },
        ],
      };
      this.instanceRadar.setOption(options);
    },
    goSubmit(id) {
      localStorage.setItem("activeCard", "matter");
      this.$router.push({
        name: "project",
        params: { id, activeMenu: "projectgl", type: "project" },
      });
    },
    goExamine(item) {
      let { project_id, file_type } = { ...item };
      this.$router.push({
        name: "examine",
        params: {
          id: project_id,
          type: file_type,
          status: "examine",
        },
      });
    },

    goUpData(item) {
      let { project_id, type } = { ...item };
      this.$router.push({
        name: "log",
        params: {
          id: project_id,
          type: type - 1,
          status: "edit",
        },
      });
    },
    async goSupOrPro(i) {
      let { project_id, file_id, file_type, item } = i;
      if (item.indexOf("督办通知") != -1) {
        this.$router.push({
          name: "supervise",
          params: {
            id: file_id,
            type: 6,
            status: "look",
          },
        });
      } else if (item.indexOf("专项督查报告") != -1) {
        this.$router.push({
          name: "supervise",
          params: {
            id: file_id,
            type: 7,
            status: "look",
          },
        });
      } else if (file_type != null) {
        await CheckNotice({ notice_id: i.id });
        localStorage.setItem("activeCard", "matter");
        this.$router.push({
          name: "project",
          params: { id: project_id, activeMenu: "projectgl", type: "project" },
        });
      }
    },
    go(i) {
      let { project_id, file_id, file_type, item } = i;
      if (item.indexOf("督办通知") != -1) {
        this.$router.push({
          name: "supervise",
          params: {
            id: file_id,
            type: 6,
            status: "look",
          },
        });
      } else if (item.indexOf("日报") != -1) {
        this.$router.push({
          name: "log",
          params: {
            id: file_id,
            type: 0,
            status: "look",
          },
        });
      } else if (item.indexOf("周报") != -1) {
        this.$router.push({
          name: "log",
          params: {
            id: file_id,
            type: 1,
            status: "look",
          },
        });
      } else if (item.indexOf("月报") != -1) {
        this.$router.push({
          name: "log",
          params: {
            id: file_id,
            type: 2,
            status: "look",
          },
        });
      } else if (item.indexOf("季报") != -1) {
        this.$router.push({
          name: "log",
          params: {
            id: file_id,
            type: 3,
            status: "look",
          },
        });
      } else if (item.indexOf("半年报") != -1) {
        this.$router.push({
          name: "log",
          params: {
            id: file_id,
            type: 4,
            status: "look",
          },
        });
      } else if (item.indexOf("年报") != -1) {
        this.$router.push({
          name: "log",
          params: {
            id: file_id,
            type: 5,
            status: "look",
          },
        });
      } else if (item.indexOf("专项督察报告") != -1) {
        this.$router.push({
          name: "supervise",
          params: {
            id: file_id,
            type: 7,
            status: "look",
          },
        });
      } else if (file_type != null) {
        if (file_type == 1) {
          this.$router.push({
            name: "pinfo",
            params: {
              id: project_id,
              type: "info",
              status: "look",
            },
          });
        } else if (file_type == 4) {
          this.$router.push({
            name: "pinfo",
            params: {
              id: project_id,
              type: "project",
              status: "look",
            },
          });
        } else if (file_type == 6) {
          localStorage.setItem("activeCard", "specialClass");
          this.$router.push({
            name: "project",
            params: {
              id: project_id,
              activeMenu: "projectgl",
              type: "project",
            },
          });
        } else {
          this.$router.push({
            name: "look",
            params: {
              id: project_id,
              type: file_type,
              status: "look",
            },
          });
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.m-box {
  padding: 30px 20px;
  display: grid;
  grid-template-rows: 260px 1fr;
  grid-row-gap: 20px;
  // .t-box {
  //   display: grid;
  //   grid-template-columns: 240px 1fr;
  //   grid-column-gap: 20px;
  // }
  .b-box {
    display: grid;
    grid-template-columns: 1fr 1100px;
    grid-column-gap: 20px;
  }
}
.sh-box {
  padding: 30px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  border-radius: 10px;
  text-align: left;
}
.box-p-20 {
  padding: 30px 20px;
}
.title-box {
  cursor: default;
  img {
    vertical-align: middle;
    margin-right: 10px;
  }
  span {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    vertical-align: middle;
  }
}
.fast {
  margin-top: 20px;
  // width: 200px;
  // height: 70px;
  height: 160px;
  line-height: 160px;
  background: #f1f6ff;
  border-radius: 10px;
  font-size: 36px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #446db3;
  cursor: pointer;
  span {
    margin: 0 10px 0 22px;
  }
  img {
    vertical-align: middle;
  }
}

.project-list {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  li {
    position: relative;
    padding: 24px 0 24px 32px;
    width: 220px;
    height: 162px;
    cursor: default;
    img {
      width: 47px;
      height: 47px;
    }
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
    }
    .num {
      margin-top: -6px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      span {
        font-size: 36px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        margin-right: 10px;
        vertical-align: sub;
      }
    }

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 6px;
      height: 100%;
      border-radius: 6px 0px 0px 6px;
      background: #ff7373;
    }
    &:nth-of-type(1) {
      background: #fff1f1;
      span {
        color: #ff7272;
      }
      &::before {
        background: #ff7373;
      }
    }
    &:nth-of-type(2) {
      background: #fff7eb;
      span {
        color: #ffaf36;
      }
      &::before {
        background: #ffaf36;
      }
    }
    &:nth-of-type(3) {
      background: #e7faf7;
      span {
        color: #17d0b1;
      }
      &::before {
        background: #17d0b1;
      }
    }
    &:nth-of-type(4) {
      background: #f1f6ff;
      span {
        color: #78a3ff;
      }
      &::before {
        background: #78a3ff;
      }
    }
    &:nth-of-type(5) {
      background: #f4eefb;
      span {
        color: #9155dc;
      }
      &::before {
        background: #9155dc;
      }
    }
    &:nth-of-type(6) {
      background: #f3f3f3;
      span {
        color: #888888;
      }
      &::before {
        background: #888888;
      }
    }
  }
}
.chart-box {
  position: relative;
  width: 100%;
  height: calc(100% - 27px);
  .chart-radar {
    width: 100%;
    height: 100%;
  }
}
.placing {
  position: absolute;
  right: 30px;
  top: 0px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  img {
    margin: -6px 8px 0 0;
    width: 22px;
    height: 22px;
    vertical-align: middle;
  }
}
.nav-card {
  position: relative;
  margin-top: -27px;
  width: 100%;
  height: 100%;
  ul {
    margin-bottom: 30px;
    display: flex;
    justify-content: flex-end;
    li {
      position: relative;
      width: 112px;
      height: 40px;
      line-height: 40px;
      background: #eff1f5;
      border-radius: 6px;
      margin-left: 10px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      text-align: center;
      cursor: default;

      &.active {
        background-color: #5889dc;
        color: #fff;
        font-weight: bold;
        &::before {
          content: "";
          position: absolute;
          bottom: -10px;
          left: 50%;
          margin-left: -10px;
          border-top: 10px solidrgba(0, 0, 0, 0);
          border-bottom: 10px solid #5889dc;
          border-left: 10px solid rgba(0, 0, 0, 0);
          border-right: 10px solid rgba(0, 0, 0, 0);
          transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
          -o-transform: rotate(180deg);
        }
      }
    }

    /deep/ .el-badge__content {
      padding: 0;
      border: 0;
      min-width: 18px;
      height: 18px;
      line-height: 18px;
      background: #f15847;
      border-radius: 50%;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
    }
    /deep/ .el-badge__content.is- {
      top: 4px;
      right: 2px;
    }
  }
}
.examine {
  position: absolute;
  left: 0;
  bottom: -18px;
  width: 120px;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  background: #f89718;
  border-radius: 4px;
  text-align: center;
  cursor: default;
}
// /deep/ .el-table--border th {
//   border-right: none;
//   background: #446db3 !important;
//   color: #fff;
// }

//// 表格样式修改
/deep/.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #f7faff;
}

/deep/.el-table__header .has-gutter tr th {
  height: 48px;
  background: #446db3 !important;
  color: #fff;
  border-right: 0;
}
/deep/.el-table tr {
  height: 48px;
  font-size: 14px;
  background-color: #fff;
}
/deep/.el-table .el-table__cell {
  height: 48px;
  padding: 0;

  cursor: pointer;
  .cell {
    height: 48px;
    line-height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 表格分页样式修改
.el-pagination {
  position: absolute;
  right: 0;
  bottom: -18px;
  text-align: right;
}
/deep/ .el-pager li {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
  margin: 0 8px;
}

/deep/ .el-pager li.active {
  color: #fff;
  background: #446db3;
  box-shadow: 0px 0px 3px 0px rgba(0, 50, 89, 0.4);
  border-radius: 6px;
}

/deep/ .el-pagination .el-icon-arrow-right:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("~@img/atlas/icon-page-right.png") no-repeat center;
}
/deep/
  .el-pagination
  button:disabled.btn-next:hover
  .el-icon-arrow-right:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("~@img/atlas/icon-page-right.png") no-repeat center;
}
/deep/.el-pagination .btn-next:hover .el-icon-arrow-right:before {
  background: url("~@img/atlas/sidenav-hover2.png") no-repeat center;
}
/deep/ .el-pagination .el-icon-arrow-left:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("~@img/atlas/icon-page-left.png") no-repeat center;
}
/deep/
  .el-pagination
  button:disabled.btn-prev:hover
  .el-icon-arrow-left:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("~@img/atlas/icon-page-left.png") no-repeat center;
}
/deep/.el-pagination .btn-prev:hover .el-icon-arrow-left:before {
  background: url("~@img/atlas/sidenav-hover1.png") no-repeat center;
}
/deep/.pagination .el-select .el-input.is-focus .el-input__inner {
  height: 40px;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/.pagination .el-input__inner {
  height: 40px;
  color: #666;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/.pagination .el-pagination__sizes .el-input .el-input__inner:hover {
  height: 40px;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/ .el-pagination__jump {
  height: 40px;
  line-height: 40px;
}
/deep/.pagination .el-pagination__jump .el-input__inner {
  color: #ccc;
}
/deep/.pagination .el-pagination__jump .el-input__inner.active {
  color: #666;
}
/deep/.el-pagination__jump .el-input__inner:focus {
  color: #666;
}

// 多选框

/deep/ .el-checkbox__input {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  line-height: 10px;
  background: #ffffff;
  border: 1px solid #cccccc;
}

/deep/ .el-checkbox__input .el-checkbox__inner {
  width: 8px;
  height: 8px;
  border: 0;
}

/deep/ .el-checkbox__input.is-checked,
.el-checkbox__input.is-indeterminate {
  border-color: #446db3;
}

/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: transparent;
  border-color: transparent;
}
/deep/ .el-checkbox__inner::after,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  content: none;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #446db3;
  border-color: #446db3;
}
/deep/ .el-pagination .btn-prev,
/deep/ .el-pagination .btn-next {
  padding: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}

.tab-btn {
  display: inline-block;
  width: 50px;
  height: 24px;
  line-height: 24px;
  background: #f89718;
  border-radius: 4px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .m-box .b-box {
    display: grid;
    grid-template-columns: 440px 1fr;
    grid-column-gap: 20px;
  }
  .project-list li {
    width: 180px;
  }
  .project-list li .title {
    font-size: 13px;
  }
  /deep/ .el-table {
    height: 260px !important;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .m-box .b-box {
    display: grid;
    grid-template-columns: 400px 1fr;
    grid-column-gap: 20px;
  }
  .fast {
    height: 130px;
    line-height: 130px;
  }
  /deep/ .el-table {
    height: 226px !important;
  }
  .project-list li {
    width: 132px;
    padding: 24px 0 22px 20px;
  }

  .nav-card ul li {
    width: 100px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .m-box .b-box {
    grid-template-columns: 360px 1fr;
  }
  .nav-card ul li {
    width: 94px;
  }
  .box-p-20 {
    padding: 30px 16px;
  }
  .fast {
    font-size: 30px;
    img {
      width: 30px;
    }
  }
  .m-box .t-box {
    grid-template-columns: 200px 1fr;
  }
  /deep/ .el-table {
    height: 260px !important;
  }
  .project-list li {
    width: 120px;
    padding: 24px 0 22px 20px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/ .el-table {
    height: 310px !important;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .m-box {
    transform: scale(0.88, 0.86);
    -moz-transform: scale(0.88, 0.86);
    -webkit-transform: scale(0.88, 0.86);
    -o-transform: scale(0.88, 0.86);
    transform-origin: 0 0;
    height: 820px;
  }
  .m-box .b-box {
    grid-template-columns: 200px 1fr;
  }
  .fast {
    font-size: 14px;
    img {
      width: 14px;
    }
  }
  .nav-card ul li {
    width: 80px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .m-box {
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform-origin: 0 0;
    height: 810px;
  }
  .nav-card ul li {
    width: 70px;
  }
  .project-list li {
    width: 110px;
  }
}
</style>
